<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
    <title>人脸检测</title>
    <script src="/public/js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script>

        function rainclick(text,time){
            layer.open({
                type: 1,
                title:false,
                time: time,
                // skin: 'layui-layer-rim', //加上边框
                closeBtn: 0,
                shadeClose: true,
                area: ['420px', '320px'], //宽高
                content: text
            });
        }



        //这段代 主要是获取摄像头的视频流并显示在Video 签中
        window.addEventListener("DOMContentLoaded", function () {
            var canvas = document.getElementById("canvas"),
                videoObj = { "video": true },
                errBack = function (error) {
                    console.log("Video capture error: ", error.code);
                };
           
            //拍照按钮
		$("#snap").click(function () {
            // document.getElementById('image1').src = '/public/uploads/20180525/0af2110980d6554a84a326b0b07ba4cb.png';
			context.drawImage(video, 0, 0, 630, 300);
            CatchCode();
			});
            //拍照每秒一次
            //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
            //更新兼容火狐浏览器
            if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
                navigator.getUserMedia(videoObj, function (stream) {
                    video.srcObject  = stream;
                    video.play();
                }, errBack);
            }

        }, false);

        function dataURItoBlob(base64Data) {
            var byteString;
            if (base64Data.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(split()[1]);
            else
                byteString = unescape(base64Data.split(',')[1]);
            var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
            var ia = new Uint8Array(length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ia], {type:mimeString});
        }
        function flag_value(value){
            document.getElementById('flag').innerHTML = value;
            // var flag = document.getElementById('flag').innerHTML;
            // alert(flag);
        }
        function flag_value2(time){
            setTimeout(function(){
                document.getElementById('flag').innerHTML = '0';
            }, time);
        }

        //上传服务器
        function CatchCode() {
            // // 防止定时函数捣乱
            flag_value(1);
            var canvans = document.getElementById("canvas");
            //获取浏览器页面的画布对象
            //以下开始编 数据
            var imageBase64 = canvans.toDataURL();
            var blob = dataURItoBlob(imageBase64);  // 上一步中的函数
            var fd = new FormData(document.forms[0]);
            fd.append("the_file", blob, 'image.png');
            //将图像转换为base64数据
           
        }

    </script>
    <style>
        .div-a{ width:40%;height:60%;margin: auto;}
        .div-b{ float:right;width:59%;height:60%;border:1px solid #000}
        .div-c{ float:right;width:100%;height:40%;margin-top: 1%; border:1px solid #000}
        .div-d{ float:left;width:40%;height:60%;margin-right: 1%;margin-left: 5%;text-align: center;}
        .div-e{ float:left;width:40%;height:60%;margin-left: 1%;text-align: center;}
        .state{ width:80%;height:10%;margin-left: 1%;text-align: center;font-size: 30px;}
        span{ font-size:25px }
    </style>

</head>
<body style="background-image: url('/public/img/9.jpg')" >
<h1 align="center" id="title">人脸登录</h1>
<!-- 左边区域 -->
<div class="div-a" id="contentHolder" align="center">
    <canvas style="" hidden="hidden"  id="canvas" width="520" height="250"></canvas>
</div>
</body>
</html>